.languages {
    display: flex;
    flex-direction: column;
    gap: $space-xxs;
    height: min-content;

    &-text {
        font-weight: 600;
    }

    &-bar {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        width: 272px;
        min-width: 272px;
        height: 10px;
        overflow: hidden;
        border-radius: $border-radius;

        @media screen and (max-width: 544px) {
            width: 244px;
            min-width: 244px;
        }
    }

    &-percentage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px $space-l;
        max-width: 300px;
    }

    &-color {
        display: flex;
        align-items: center;
        gap: $space-xxs;
    }

    &-language {
        display: flex;
        gap: 4px;
    }
}
